<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CustomControlsLibrary">

    <Style TargetType="local:TrafficControl">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:TrafficControl">
                    <Grid
                        x:Name="MainLight"
                        Width="{TemplateBinding Width}"
                        Height="{TemplateBinding Height}"
                        Background="Gray">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="1*"/>
                            <RowDefinition Height="1*"/>
                            <RowDefinition Height="1*"/>
                        </Grid.RowDefinitions>
                        <Ellipse x:Name="RedEllipse"
                                 HorizontalAlignment="Stretch"  
                                 VerticalAlignment="Stretch"
                                 Margin="5"
                                 Grid.Row="0" 
                                 Opacity="0.1"
                                 Fill="Red"></Ellipse>
                        <Ellipse x:Name="YellowEllipse" 
                                 HorizontalAlignment="Stretch"  
                                 VerticalAlignment="Stretch"
                                 Margin="5"
                                 Grid.Row="1" 
                                 Opacity="0.1"
                                 Fill="Yellow"></Ellipse>
                        <Ellipse x:Name="GreenEllipse" 
                                 HorizontalAlignment="Stretch"  
                                 VerticalAlignment="Stretch"
                                 Margin="5"
                                 Grid.Row="2" 
                                 Opacity="0.1"
                                 Fill="LightGreen"></Ellipse>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="TrafficStates">
                                <VisualStateGroup.States>
                                    <VisualState x:Name="Off"></VisualState>
                                    <VisualState x:Name="Red">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="RedEllipse"
                                                            Storyboard.TargetProperty="(Ellipse.Opacity)"
                                                            To="1">
                                            </DoubleAnimation>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Yellow">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="YellowEllipse"
                                                            Storyboard.TargetProperty="(Ellipse.Opacity)"
                                                            To="1">
                                            </DoubleAnimation>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Green">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="GreenEllipse"
                                                            Storyboard.TargetProperty="(Ellipse.Opacity)"
                                                            To="1">
                                            </DoubleAnimation>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup.States>
                                <VisualStateGroup.Transitions>
                                    <VisualTransition To="Red" GeneratedDuration="{TemplateBinding LightSpeed}"/>
                                    <VisualTransition To="Green" GeneratedDuration="{TemplateBinding LightSpeed}"/>
                                    <VisualTransition To="Yellow" GeneratedDuration="{TemplateBinding LightSpeed}"/>
                                    <VisualTransition To="Off" GeneratedDuration="{TemplateBinding LightSpeed}"/>
                                </VisualStateGroup.Transitions>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>
